<template>
	<div id="shopcart">
	<!-- 购物清单 -->
	<transition name="listshow">
		<div class="shopcart" v-show="clickShow">
			<p>客官大人的购物口袋<span class="empty" @click="empty">清空口袋</span></p>
			<ul v-show="!foodList.length"><li>客官大人，去小店里挑选一下吧</li></ul>
			<ul>
				<li v-for="food in foodList">
					<span class="c-name">{{food.name}}</span>
					<span class="c-price">¥{{food.price*food.count}}</span>
					<span class="s-count"><cartcontrol :food="food"></cartcontrol></span>
				</li>
			</ul>
			<p>暂时的占位,写点啥呢</p>
		</div>
	</transition>
	<!-- 购物清单遮罩层 -->
	<transition name="fadeBG">
		<div class="list-bg" v-show="clickShow" @click="listShow"></div>
	</transition>
	<!-- logo -->
	<div class="shop-logo">
		<div class="logo-img"><Icon type="ios-cart"></Icon></div>
		<!-- 购买总数 -->
		<div class="buy-num" v-show="foodList.length>0">{{foodList.length}}</div>
	</div>
	<!-- 总价 -->
	<div class="main-count" @click="listShow">
		<div class="tips">{{priceTips}} </div>
		<p><b>¥{{mainCount}}</b> ｜ 另需配送费¥4元</p>
		<span :class="mainCount<20?'gray':'yellow'">{{btnText}}</span>
	</div>
	</div>
</template>

<script type="text/ecmascript-6">
/* eslint-disable  */
import cartcontrol from 'components/cartcontrol/cartcontrol.vue'
import Vue from 'vue'

export default{
	data(){
		return {
			clickShow: false,
		}
	},
	props:{
		foodList:{
			type:Array
		}
	},
	computed: {
		mainCount () {// 总价格计算
			let mainCount = 0
			this.foodList.forEach( (food) => {
				mainCount += food.price*food.count
				// 动态设置某个属性,响应式数据更新，以便其他计算属性使用总价格
				Vue.set(this.foodList, 'mainCount', mainCount)
			})
			return mainCount
		},
		btnText () {// 结算按钮
			if ( !this.mainCount ) {
				return "满￥20起送"
			} else if ( this.mainCount > 0 && this.mainCount < 20) {
				return "还差￥" + (20 - this.mainCount) + "起送"
			} else if ( this.mainCount >= 20 ) {
				return "去结算"
			}
		},
		priceTips () {// 满减提示，凑单提示
			if ( !this.mainCount ) {
				return "大人不去小店里挑选一番？"
			} else if ( this.mainCount > 0 && this.mainCount < 20) {
				return "还差￥" + (20 - this.mainCount) + "起送[去凑单]"
			} else if ( this.mainCount >= 20 ) {
				return "在线支付满28减5唷　U·ェ·U"
			}
		}
	},
	methods:{
		listShow () {
			this.clickShow = !this.clickShow
		},
		empty () {
      this.foodList.forEach((food)=>{
        food.count = 0
      })
		}
	},
	components:{
		cartcontrol
	}
}
</script>

<style>
  #shopcart{position:fixed;bottom: 0; height: 70px;line-height: 46px; width: 100%; text-align: center; left: 0;}
  .shop-logo{position: absolute; width: 50px; height: 50px; background:#666; bottom:15px; left: 10px; border-radius: 50%;z-index: 100;}
  .logo-img{ width: 100%; height: 100%; border: #333 3px solid; border-radius: 50%;display: flex; align-items: center; justify-content: center;}
  .logo-img img{ width: 100%;border-radius: 50%;}
  .logo-img i{color: #ccc;font-size: 28px;}
  .shopcart{ position: fixed; bottom: 70px; width: 100%; background: #fff; box-shadow: rgba(7,17,27,0.3) 2px 0 6px; z-index: 98;}
  .shopcart p{ border-left: #ffd161 4px solid; line-height: 32px; font-size: 16px; text-align: left; padding-left: 8px; background: #f7f7f7;}
  .shopcart li{ position: relative; display: flex; align-items:center}
  .shopcart li span{ display: inline-block; }
  .c-price{color: red;}
  .main-count{background: #3f3f3f;  width: 100%; height:70px; position: relative; z-index: 99;}
  .main-count p{color: #ccc; font-size: 12px; display: inline-block;padding-left: 5%}
  .main-count p b{ font-size: 20px; }
  .main-count span{ background: #ffd161;height: 46px; width: 30%; float: right; color: #3c3113; font-weight: bold;font-size: 14px;}
  .main-count span.gray{background: #ccc; color: #666;}
  .main-count span.yellow{background: #ffd161;}
  .buy-num{background: red; color: #fff; width: 25px; height: 18px; line-height: 18px; font-size: 12px; border-radius: 8px; position: absolute; top: -4px;right: -9px; box-shadow: rgba(7,17,27,0.5) 2px 2px 2px;}
  /*过渡效果必须全局*/
  .listshow-enter-active {transition: all .7s ease;}
  .listshow-leave-active {transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
  .listshow-enter, .listshow-leave-active {transform: translateY(500px);}
  /*购物车详细*/
  .c-name{ float: left;margin-left: 6%; width: 60%; text-align: left;}
  .c-price{float: left;}
  .list-bg{ width: 100%; height: 100%; background: rgba(7,17,27,0.5);position: fixed;top: 0}
  .fadeBG-enter-active {transition: all .7s ease;}
  .fadeBG-leave-active {transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);}
  .fadeBG-enter, .fadeBG-leave-active {opacity: 0;}
  /*清空*/
  .empty{float: right;}
  .tips{height: 24px; line-height: 24px; background: #fffbe6; font-size: 10px; color: #3c3113}
</style>
